<?php $this->load->view($view_path.'common/header') ?>
<script type="text/javascript">
$('body').ready(function(){
	init();
})
</script>
	<div id="container">
	
		<a id="selectBtn" href="javascript:void(0);" onclick="document.getElementById('avatar').click();"></a>
		<a id="saveBtn" href="javascript:void(0);" onclick="saveImage();"></a>
		<input type="file" name="avatar" id="avatar"  style="visibility:hidden;" onchange="selectImage(this.files)" />
		<div id="wrapper">
			<canvas id="cropper"></canvas>
			<a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋转</a>
			<a id="rotateRightBtn" href="javascript:void(0);" onclick="rotateImage(event);">向右旋转</a>

			<span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
			<div id="previewContainer">
				<canvas id="preview180" width="180" height="180" class="preview"></canvas>
				<span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片，180x180像素</span>
				
				<canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
				<span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素</span>

				<canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
				<span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸图片 50x50像素</span>
			</div>
		</div>
	
	</div>

<?php $this->load->view($view_path.'common/footer') ?>